<template>
  <view class="work-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="header-title">党员发展进程</text>
    </view>

    <!-- 当前阶段信息卡片 -->
    <view class="current-stage-card">
      <view class="card-title">当前阶段</view>
      <view class="current-stage-name">{{ currentStageText }}</view>
      <view class="stage-desc">{{ currentStageDesc }}</view>
    </view>

    <!-- 进度流程图 -->
    <view class="progress-section">
      <view class="progress-title">发展流程</view>
      
      <view class="stage-list">
        <view 
          v-for="(stage, index) in stageList" 
          :key="index"
          class="stage-item"
          :class="{ 'active': index === currentStage, 'completed': index <= currentStage }"
        >
          <!-- 阶段图标 -->
          <view class="stage-icon-wrapper">
            <view class="stage-icon" :class="{ 'has-checkmark': index <= currentStage }">
              <text v-if="index <= currentStage" class="checkmark">✓</text>
              <text v-else>{{ index + 1 }}</text>
            </view>
          </view>

          <!-- 连接线 -->
          <view v-if="index < stageList.length - 1" class="stage-line" :class="{ 'completed': index < currentStage }"></view>

          <!-- 阶段信息 -->
          <view class="stage-info">
            <view class="stage-name">{{ stage.name }}</view>
            <view class="stage-description">{{ stage.desc }}</view>
            
      
            
            <!-- 审核状态标签 -->
            <view v-if="isLoggedIn && stageApplicationStatus[index]" class="status-tag" :class="{'status-pending': stageApplicationStatus[index] === '0', 'status-approved': stageApplicationStatus[index] === '1', 'status-rejected': stageApplicationStatus[index] === '2'}">
              {{ getStatusText(stageApplicationStatus[index]) }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 提示信息 -->
    <view v-if="!isLoggedIn" class="login-tip-box">
      <text class="tip-text">请先登录查看您的发展进程</text>
      <button class="login-btn" @click="handleToLogin">立即登录</button>
    </view>

    <!-- 快速入口区域 -->
    <view v-if="isLoggedIn" class="quick-entry-section">
      <view class="section-title">
        <text class="title-icon">📝</text>
        <text class="title-text">资料申请入口</text>
      </view>
      
      <view class="entry-grid">
        <view 
          class="entry-item" 
          :class="{ 'entry-approved': stageApplicationStatus[1] === '1' || stageApplicationStatus[1] === 1 }"
          @click="handleToApply('activist')"
        >
          <view class="entry-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
            <text class="iconfont icon-edit"></text>
          </view>
          <view class="entry-name">入党积极分子申请</view>
          <view v-if="stageApplicationStatus[1]" class="entry-status" :class="{'status-pending': stageApplicationStatus[1] === '0', 'status-approved': stageApplicationStatus[1] === '1', 'status-rejected': stageApplicationStatus[1] === '2'}">
            {{ getStatusText(stageApplicationStatus[1]) }}
          </view>
          <view v-else class="entry-hint">点击申请</view>
        </view>

        <view 
          class="entry-item" 
          :class="{ 'entry-approved': stageApplicationStatus[2] === '1' || stageApplicationStatus[2] === 1 }"
          @click="handleToApply('developmentObject')"
        >
          <view class="entry-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <text class="iconfont icon-edit"></text>
          </view>
          <view class="entry-name">发展对象申请</view>
          <view v-if="stageApplicationStatus[2]" class="entry-status" :class="{'status-pending': stageApplicationStatus[2] === '0', 'status-approved': stageApplicationStatus[2] === '1', 'status-rejected': stageApplicationStatus[2] === '2'}">
            {{ getStatusText(stageApplicationStatus[2]) }}
          </view>
          <view v-else class="entry-hint">点击申请</view>
        </view>

        <view 
          class="entry-item" 
          :class="{ 'entry-approved': stageApplicationStatus[3] === '1' || stageApplicationStatus[3] === 1 }"
          @click="handleToApply('probationary')"
        >
          <view class="entry-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <text class="iconfont icon-edit"></text>
          </view>
          <view class="entry-name">预备党员申请</view>
          <view v-if="stageApplicationStatus[3]" class="entry-status" :class="{'status-pending': stageApplicationStatus[3] === '0', 'status-approved': stageApplicationStatus[3] === '1', 'status-rejected': stageApplicationStatus[3] === '2'}">
            {{ getStatusText(stageApplicationStatus[3]) }}
          </view>
          <view v-else class="entry-hint">点击申请</view>
        </view>

        <view 
          class="entry-item" 
          :class="{ 'entry-approved': stageApplicationStatus[4] === '1' || stageApplicationStatus[4] === 1 }"
          @click="handleToApply('formal')"
        >
          <view class="entry-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
            <text class="iconfont icon-edit"></text>
          </view>
          <view class="entry-name">正式党员转正申请</view>
          <view v-if="stageApplicationStatus[4]" class="entry-status" :class="{'status-pending': stageApplicationStatus[4] === '0', 'status-approved': stageApplicationStatus[4] === '1', 'status-rejected': stageApplicationStatus[4] === '2'}">
            {{ getStatusText(stageApplicationStatus[4]) }}
          </view>
          <view v-else class="entry-hint">点击申请</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"
  import { listActivist, listDevelopmentObject, listProbationary, listFormal } from "@/api/system/party"

  export default {
    data() {
      return {
        user: {},
        currentStage: 0, // 当前阶段：0-4
        isLoggedIn: false,
        stageApplicationStatus: {
          1: null, // 入党积极分子
          2: null, // 发展对象
          3: null, // 预备党员
          4: null  // 正式党员
        }, // 各阶段申请状态
        stageList: [
          {
            name: '普通学生',
            desc: '递交入党申请书，参加党课学习'
          },
          {
            name: '入党积极分子',
            desc: '经支部研究确定，培养考察一年以上'
          },
          {
            name: '发展对象',
            desc: '经支部研究同意，进行政治审查'
          },
          {
            name: '预备党员',
            desc: '通过支部大会讨论，预备期一年'
          },
          {
            name: '正式党员',
            desc: '预备期满，转为正式党员'
          }
        ]
      }
    },
    computed: {
      currentStageText() {
        const stageMap = {
          0: '普通学生',
          1: '入党积极分子',
          2: '发展对象',
          3: '预备党员',
          4: '正式党员'
        }
        return stageMap[this.currentStage] || '未知阶段'
      },
      currentStageDesc() {
        if (this.currentStage >= 0 && this.currentStage < this.stageList.length) {
          return this.stageList[this.currentStage].desc
        }
        return ''
      }
    },
    onLoad() {
      this.checkLoginAndGetUser()
    },
    onShow() {
      // 每次显示页面时刷新数据
      this.checkLoginAndGetUser()
    },
    methods: {
      // 检查登录状态并获取用户信息
      checkLoginAndGetUser() {
        const token = this.$store.getters.token
        if (token) {
          this.isLoggedIn = true
          this.getUser()
        } else {
          this.isLoggedIn = false
          this.currentStage = 0
        }
      },
      
      // 获取用户信息
      getUser() {
        console.log('getUser')
        getUserProfile().then(response => { 
          console.log('response', response)
          this.user = response.data
          // 获取当前阶段，如果未设置则默认为0
          this.currentStage = response.data.currentStage !== undefined ? response.data.currentStage : 0
          console.log('this.currentStage', this.currentStage)
          // 获取各阶段申请状态
          this.getApplicationStatus()
        }).catch(error => {
          console.error('获取用户信息失败:', error)
          this.$modal.msgError('获取用户信息失败')
        })
      },

      // 获取各阶段的申请状态
      getApplicationStatus() {
        // 优先使用 user.id，兼容 userId
        const userId = this.user.id || this.user.userId || this.$store.state.user.id
        console.log('userId', userId)
        if (!userId) return
        console.log('listActivist') 
        // 获取入党积极分子申请状态（阶段1）
        listActivist({ userId: userId }).then(response => {
          console.log('入党积极分子申请状态:', response)
          if (response.rows && response.rows.length > 0) {
            this.$set(this.stageApplicationStatus, 1, response.rows[0].auditStatus)
            console.log('设置阶段1状态:', response.rows[0].auditStatus)
          }
        }).catch(error => {
          console.error('获取入党积极分子申请状态失败:', error)
        })
        
        // 获取发展对象申请状态（阶段2）
        listDevelopmentObject({ userId: userId }).then(response => {
          console.log('发展对象申请状态:', response)
          if (response.rows && response.rows.length > 0) {
            this.$set(this.stageApplicationStatus, 2, response.rows[0].auditStatus)
            console.log('设置阶段2状态:', response.rows[0].auditStatus)
          }
        }).catch(error => {
          console.error('获取发展对象申请状态失败:', error)
        })
        
        // 获取预备党员申请状态（阶段3）
        listProbationary({ userId: userId }).then(response => {
          console.log('预备党员申请状态:', response)
          if (response.rows && response.rows.length > 0) {
            this.$set(this.stageApplicationStatus, 3, response.rows[0].auditStatus)
            console.log('设置阶段3状态:', response.rows[0].auditStatus)
          }
        }).catch(error => {
          console.error('获取预备党员申请状态失败:', error)
        })
        
        // 获取正式党员申请状态（阶段4）
        listFormal({ userId: userId }).then(response => {
          console.log('正式党员申请状态:', response)
          if (response.rows && response.rows.length > 0) {
            this.$set(this.stageApplicationStatus, 4, response.rows[0].auditStatus)
            console.log('设置阶段4状态:', response.rows[0].auditStatus)
          }
        }).catch(error => {
          console.error('获取正式党员申请状态失败:', error)
        })
      },

      // 提交申请
      handleSubmitApplication(stageIndex) {
        const stageMap = {
          1: '/pages/work/apply/activist',
          2: '/pages/work/apply/developmentObject',
          3: '/pages/work/apply/probationary',
          4: '/pages/work/apply/formal'
        }
        
        const path = stageMap[stageIndex]
        if (path) {
          this.$tab.navigateTo(path)
        }
      },

      // 跳转到申请页面
      handleToApply(type) {
        const pathMap = {
          'activist': '/pages/work/apply/activist',
          'developmentObject': '/pages/work/apply/developmentObject',
          'probationary': '/pages/work/apply/probationary',
          'formal': '/pages/work/apply/formal'
        }
        
        const path = pathMap[type]
        if (path) {
          this.$tab.navigateTo(path)
        }
      },

      // 获取状态样式类
      getStatusClass(status) {
        const classMap = {
          '0': 'status-pending',
          '1': 'status-approved',
          '2': 'status-rejected'
        }
        return classMap[status] || ''
      },

      // 获取状态文本
      getStatusText(status) {
        const textMap = {
          '0': '待审核',
          '1': '已通过',
          '2': '需修改'
        }
        return textMap[status] || ''
      },

      // 跳转到登录页面
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .work-container {
    min-height: 100vh;
    background-color: #f5f6f7;
    padding-bottom: 30px;

    .page-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 30px 20px;
      text-align: center;

      .header-title {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
      }
    }

    .current-stage-card {
      margin: -20px 15px 20px 15px;
      background-color: #ffffff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

      .card-title {
        font-size: 14px;
        color: #999999;
        margin-bottom: 10px;
      }

      .current-stage-name {
        font-size: 22px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 8px;
      }

      .stage-desc {
        font-size: 14px;
        color: #666666;
        line-height: 22px;
      }
    }

    .progress-section {
      margin: 0 15px;
      background-color: #ffffff;
      border-radius: 12px;
      padding: 20px 15px;

      .progress-title {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 25px;
        text-align: center;
      }

      .stage-list {
        .stage-item {
          position: relative;
          display: flex;
          align-items: flex-start;
          margin-bottom: 35px;

          &:last-child {
            margin-bottom: 0;
          }

          .stage-icon-wrapper {
            flex-shrink: 0;
            position: relative;
            z-index: 2;

            .stage-icon {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background-color: #e0e0e0;
              color: #999999;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              font-weight: bold;
              transition: all 0.3s;
              
              &.has-checkmark {
                background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
                color: #ffffff;
                
                .checkmark {
                  font-size: 24px;
                  font-weight: bold;
                }
              }
            }
          }

          .stage-line {
            position: absolute;
            left: 19px;
            top: 40px;
            width: 2px;
            height: 50px;
            background-color: #e0e0e0;
            transition: all 0.3s;
          }

          .stage-info {
            margin-left: 15px;
            flex: 1;

            .stage-name {
              font-size: 16px;
              font-weight: bold;
              color: #666666;
              margin-bottom: 5px;
              transition: all 0.3s;
            }

            .stage-description {
              font-size: 13px;
              color: #999999;
              line-height: 20px;
            }

            .submit-btn-wrapper {
              margin-top: 10px;

              .submit-btn {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: #ffffff;
                border: none;
                border-radius: 16px;
                padding: 8px 20px;
                font-size: 13px;
                display: inline-flex;
                align-items: center;
                
                .iconfont {
                  margin-right: 5px;
                  font-size: 14px;
                }
              }
            }

            .status-tag {
              display: inline-block;
              margin-top: 8px;
              padding: 4px 12px;
              border-radius: 12px;
              font-size: 12px;
              
              &.status-pending {
                background-color: #fff7e6;
                color: #fa8c16;
              }
              
              &.status-approved {
                background-color: #f6ffed;
                color: #52c41a;
              }
              
              &.status-rejected {
                background-color: #fff1f0;
                color: #ff4d4f;
              }
            }
          }

          // 已完成的阶段
          &.completed {
            .stage-line.completed {
              background: linear-gradient(180deg, #52c41a 0%, #73d13d 100%);
            }

            .stage-info .stage-name {
              color: #333333;
            }
          }

          // 当前阶段
          &.active {
            .stage-icon-wrapper .stage-icon {
              box-shadow: 0 4px 16px rgba(82, 196, 26, 0.5);
              transform: scale(1.15);
              animation: pulse 2s ease-in-out infinite;
            }

            .stage-info .stage-name {
              color: #52c41a;
              font-size: 17px;
              font-weight: bold;
            }

            .stage-info .stage-description {
              color: #666666;
            }
          }
        }
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        box-shadow: 0 4px 16px rgba(82, 196, 26, 0.5);
      }
      50% {
        box-shadow: 0 4px 20px rgba(82, 196, 26, 0.8);
      }
    }

    .login-tip-box {
      margin: 20px 15px;
      padding: 30px 20px;
      background-color: #ffffff;
      border-radius: 12px;
      text-align: center;

      .tip-text {
        display: block;
        font-size: 15px;
        color: #666666;
        margin-bottom: 20px;
      }

      .login-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
        border: none;
        border-radius: 20px;
        padding: 12px 40px;
        font-size: 15px;
      }
    }

    .quick-entry-section {
      margin: 20px 15px;
      background-color: #ffffff;
      border-radius: 12px;
      padding: 20px 15px;

      .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        
        .title-icon {
          font-size: 20px;
          margin-right: 8px;
        }

        .title-text {
          font-size: 18px;
          font-weight: bold;
          color: #333333;
        }
      }

      .entry-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        .entry-item {
          background-color: #f8f9fa;
          border-radius: 12px;
          padding: 20px 15px;
          text-align: center;
          transition: all 0.3s;
          position: relative;
          overflow: hidden;

          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.3s;
          }

          &:active {
            transform: scale(0.95);
            
            &::before {
              opacity: 1;
            }
          }

          .entry-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto 12px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

            .iconfont {
              font-size: 24px;
              color: #ffffff;
            }
          }

          .entry-name {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            margin-bottom: 8px;
          }

          .entry-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 10px;
            font-size: 11px;
            position: relative;
            z-index: 1;
            
            &.status-pending {
              background-color: #fff7e6;
              color: #fa8c16;
            }
            
            &.status-approved {
              background-color: #f6ffed;
              color: #52c41a;
            }
            
            &.status-rejected {
              background-color: #fff1f0;
              color: #ff4d4f;
            }
          }

          .entry-hint {
            font-size: 12px;
            color: #999999;
            margin-top: 5px;
          }

          &.entry-approved {
            opacity: 0.75;
            position: relative;

            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background-color: rgba(82, 196, 26, 0.05);
              pointer-events: none;
              border-radius: 12px;
            }

            .entry-icon {
              opacity: 0.8;
            }

            .entry-name {
              color: #52c41a;
            }
          }
        }
      }
    }
  }
</style>
